<template>
  <div class="edit">
    <el-form label-width="0">
      <el-form-item prop="claName">
        <el-input v-model="tableData.itemName" placeholder="请输入" />
        <el-select v-model="tableData.itemType" @change="onChange">
          <el-option label="单选" :value="1" />
          <el-option label="多选" :value="3" />
          <el-option label="展示" :value="5" />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="edit-table">
      <lb-table
        ref="lbTable"
        align="center"
        element-loading-text="加载中"
        :column="column"
        :data="tableData.detailList"
      />
      <div class="footer">
        <el-button @click.stop="saveEdit">完成编辑</el-button>
        <el-button @click.stop="cancel">取消编辑</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { } from '@/api'

  export default {
    name: 'edittable',
    data() {
      return {
        isAdd: '', // 是否新增
        isBtnEdit: false, // 是否编辑
        tableData: {
          detailList: []
        }
      }
    },
    computed: {
      column: function() {
        return [
          {
            prop: 'itemDetailName',
            label: '选项文字',
            render: (h, { row, $index }) => {
              return (
                (
                  <el-input v-model={ row.itemDetailName } placeholder={ '请输入' } onKeyup={ row.itemDetailName = row.itemDetailName.replace(/\s+/g, '')}> </el-input>
                  // <el-input v-model={ row.itemDetailName } placeholder={ '请输入' }> </el-input>
                )
              )
            }
          },
          {
            prop: 'csmName',
            label: '默认',
            render: (h, { row, $index }) => {
              return (
                <div>
                { row.itemType === 1 && <el-radio></el-radio>}
                { row.itemType === 3 && <el-checkbox></el-checkbox>}
                </div>
              )
            }
          },
          {
            prop: 'csmName',
            label: '操作',
            render: (h, { row, $index }) => {
              return (
                <div class='ico'>
                  <i class='el-icon-top' onClick={() => this.onTop(row, $index)}></i>
                  <i class='el-icon-bottom' onClick={() => this.onBottom(row, $index)}></i>
                  <i class='el-icon-circle-plus-outline' onClick={() => this.copyAdd(row)}></i>
                  <i class='el-icon-remove-outline' onClick={() => this.iconDel(row)}></i>
                </div>
              )
            }
          }
        ]
      }
    },
    async created() {},
    methods: {
      open(val, isNewCrad) {
        this.isAdd = isNewCrad // 是否新增
        this.tableData = val
      },
      onChange(val) {
        const flag = this.tableData.detailList.every(item => item.itemType === val)
        if (!flag) {
          this.tableData.detailList.map(item => item.itemType = val)
          this.tableData.detailList = [this.deepClone(this.tableData.detailList[0])]
          this.tableData.detailList[0].itemDetailName = ''
          this.isAdd = true
          // 是否编辑
          this.isBtnEdit = true
        }
      },
      // 完成编辑
      saveEdit() {
        const flag = this.tableData.detailList.every(item => item.itemDetailName !== '')
        if (flag && this.tableData.itemName) {
          this.$emit('saveEdit', { data: this.tableData })
        } else {
          this.$message({
            message: `${flag ? '请输入安检名称' : '请输入安检项名称'}`,
            type: 'warning'
          })
        }
      },
      // 取消编辑
      cancel() {
        if (this.isAdd) {
          this.$confirm('取消编辑会清除数据,是否取消编辑?', '操作提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            this.$emit('cancelEdit', this.tableData, this.isBtnEdit)
          })
        } else {
          this.$emit('cancelEdit')
        }
      },
      // 增加
      copyAdd() {
        var id = 1
        this.tableData.detailList.push({
          itemDetailId: 0,
          itemDetailName: '',
          itemId: 0,
          itemName: '',
          isChecked: 1,
          itemType: this.tableData.itemType,
          orderNo: 1
        })
        this.tableData.detailList.map(item => {
          item.orderNo = id++
        })
      },
      // 删除
      iconDel(val) {
        this.tableData.detailList = this.tableData.detailList.filter(item => {
          return item.orderNo !== val.orderNo
        })
        var id = 1
        this.tableData.detailList.map(item => {
          item.orderNo = id++
        })
      },
      // 上
      onTop(val, index) {
        if (index !== 0) {
          const topData = this.tableData.detailList[index - 1 ] // 获取上一条数据
          this.tableData.detailList[index] = topData // 把上一条数据替换为当前数据
          this.tableData.detailList[index - 1] = val // 把当前数据赋值为上一个数据
          this.tableData.detailList = [...this.tableData.detailList] // 从新复制数据
        }
      },
      // 下
      onBottom(val, index) {
        if (index !== this.tableData.detailList.length - 1) {
          const topData = this.tableData.detailList[index + 1 ]
          this.tableData.detailList[index] = topData
          this.tableData.detailList[index + 1] = val
          this.tableData.detailList = [...this.tableData.detailList]
        }
      },
      // 深拷贝
      deepClone(target) {
        var result
        if (typeof target === 'object') {
          if (Array.isArray(target)) {
            result = []
            for (const i in target) {
              result.push(this.deepClone(target[i]))
            }
          } else if (target === null) {
            result = null
          } else if (target.constructor === RegExp) {
            result = target
          } else {
            result = {}
            for (const i in target) {
              result[i] = this.deepClone(target[i])
            }
          }
        } else {
          result = target
        }
        return result
      }
    }
  }
</script>

<style lang="scss" scoped>
.edit {
  .edit-table {
    /deep/.ico {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font-size: 24px;
      i {
        font-weight: 900;
        color: #989fc1;
      }
      i:nth-child(4) {
        color: #f84768;
      }
    }
    .footer {
      display: flex;
      padding-top: 10px;
      flex-direction: row-reverse;
      .el-button {
        margin-left: 10px;
      }
    }
  }
  /deep/.el-form-item__content {
    display: flex;
    .el-input {
      width: 222px;
      margin-right: 20px;
    }
  }
}
</style>
